<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>一次上传多个文件2</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>

            $(document).ready(function () {

                $("#btn_upload").click(function () {

                    var formData = new FormData($("#uploadForm")[0]);
                    $.ajax({
                        url: 'umps2',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            console.log(data);
                            $("#imgPreview").empty();
                            $.each(data, function (index, name){
                                var img = "<img src='photo/"+name+"' alt='图片' class='img-thumbnail img-rounded'>\n"
                                $("#imgPreview").append(img);
                            })
                            alert("上传成功！");
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            // 状态码
                            console.log(XMLHttpRequest.status);
                            // 状态
                            console.log(XMLHttpRequest.readyState);
                            // 错误信息
                            console.log(textStatus);

                            alert("error");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="container text-warning">

            <h1 class="text-center bg-success text-success padding10">一次性上传多个文件2</h1>
            <hr>


            <div>            


                <form id="uploadForm" class="form-inline">
                    用户编号：<input type="text" name="id" value="666" class="form-control">
                    <br><br>
                    <label id="realBtn" class="img-thumbnail upload" for="fileInput">
                        +点此选择图片
                    </label>
                    <input type="file" id="fileInput" multiple="true" name="file" style="display: none;">
                    <button type="button" id="btn_upload" class="btn btn-success" formaction="umps2">上传</button>
                </form>
            </div>

            <br><br><br>
            <div id="imgPreview" class="text-center">
                <img src='images/lxh01.gif' alt='图片' class='img-thumbnail img-rounded'>
            </div>

        </div>
    </body>
</html>
